<!-- RoomPanel.vue -->
<template>
  <div class="base">
    <div class="panel">
      <div v-if="rooms && rooms.floors" class="grid">
        <div
            v-for="room in flatRooms"
            :key="room.room_id"
            class="room"
            :class="{ '未开启': room.status === '未开启', '等待中': room.status === '等待中','运行中': room.status === '运行中'|| room.status === '已开启'}"
            @click="handleSelect(room)"
        >
          <p v-if="room.status === '已开启'">{{ room.room_id }}<br>{{ room.type }}<br>运行中</p>
          <p v-else>{{ room.room_id }}<br>{{ room.type }}<br>{{ room.status}}</p>
        </div>
      </div>
      <div v-else class="grid" style="justify-content: center">
        <h1 style="align-self: center;">请先开启中央空调来查看分机情况。</h1>
      </div>
    </div>
    <div class="details">
      <div class="details-content">
        <h2 v-if="statusMessage" style="text-align: center">空调分机详情</h2>
        <h3 v-if="statusMessage" style="text-align: center; color: red;margin-top: 10px">{{ statusMessage }}</h3>
        <div v-else-if="selectedDetails">
          <h2 style="text-align: center;margin-bottom: 10px">{{ selectedDetails.room_id }}房间 空调分机</h2>
          <div class="item">
            {{ acStatusDescription }}
          </div>
          <div v-if="selectedDetails.is_on !== '未开启'">
            <div class="item">
              模式：{{ modeDescription }}
            </div>
            <div class="item">
              当前房间温度：{{ selectedDetails.cur_temp }}°
            </div>
            <div class="item">
              设定目标温度：{{ selectedDetails.target_temp }}°
            </div>
            <div class="item">
              设定风速：{{ windSpeedDescription }}
            </div>
            <!--
            <div class="item">
              当前费率：{{ selectedDetails.fee_rate }} ￥ / 度
            </div>
            -->
            <div class="item">
              此次费用：{{ selectedDetails.cur_price }} ￥
            </div>
            <!--
            <div class="item">
              累计费用：{{ selectedDetails.total_price }} ￥
            </div>
            -->
          </div>
        </div>
        <h3 v-else style="text-align: center; color: gray; margin-top: 10px">请点击分机来查看详情</h3>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue';
import axios from "axios";
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;  // 从环境变量获取基础 URL

const props = defineProps({
  rooms: Object,
  buttons: Array
});

const selectedDetails = ref(null);
let selected_room_id = ref(null);
const statusMessage = ref("");

const flatRooms = computed(() => {
  return props.rooms.floors.reduce((acc, floor) => [...acc, ...floor.airconditions], []);
});

const windSpeedDescription = computed(() => {
  const windSpeeds = {
    'low': '低风',
    'middle': '中风',
    'high': '高风',
    'off':'未设定',
    0:'未设定',
    1: '低风',
    2: '中风',
    3: '高风'
  };
  return windSpeeds[selectedDetails.value.cur_wind] || '未知';
});

const modeDescription = computed(() => {
  const mode = {
    'Cold': '制冷',
    'Hot': '制热',
    'cold': '制冷',
    'hot': '制热'
  };
  return mode[selectedDetails.value.mode] || '未知';
});

const acStatusDescription = computed(() => {
  const status = {
    0:'未开启',
    1:'运行中',
    2:'等待中'
  };
  return status[selectedDetails.value.is_on] || selectedDetails.value.is_on;
});

onMounted(() => {
  const currentConfigTry = localStorage.getItem('currentConfig');
  console.log(currentConfigTry)
  if (currentConfigTry) {
    currentConfig.value = JSON.parse(currentConfigTry).currentConfig;
  }
});

const currentConfig = ref({
  air_condition_num: 0,
  default_mode: 'cold',
  default_highest_temp: 25,
  default_lowest_temp: 18,
  default_tar_temp: 22,
  default_wind_level: 1,
  high_fee_rate: 1.5,
  middle_fee_rate: 1.0,
  low_fee_rate: 0.5,
  is_running: false
});
let fetchInterval;
async function handleSelect(room) {
  selected_room_id = room.room_id;
  fetchDetails();
  if(selectedDetails.value !== null){
    fetchInterval = setInterval(fetchDetails, 1000);  // 每1秒刷新一次
  }else{
    clearInterval(fetchInterval);
  }
}

async function fetchDetails() {
  try {
    console.log(selected_room_id)
    const response = await axios.get(`${apiBaseUrl}/admin/sub/details`, {
      params: {
        'room_id': selected_room_id
      }
    });


    if (response.data.message === 'room_id not found!') {
      statusMessage.value = selectedDetails.room_id + " 房间尚未入住";  // 设置状态消息
      selectedDetails.value = null;  // 清空已选择的房间详情
    } else {
      selectedDetails.value = response.data;
      console.log(response.data)
      statusMessage.value = "";  // 清空状态消息
    }



  } catch (error) {
    console.error('获取房间详情失败:', error);
  }
  selectedDetails.room_id = selected_room_id;
}


</script>

<style scoped>
.panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: fixed;
  top: 64px;
  left: 0;
  right: 400px;
  bottom: 10px;
}
.details {
  display: flex;
  padding: 10px 20px;
  justify-content: space-between;
  align-items: center;
  float: right;
  width: 410px;
  position: fixed;
  top: 64px;
  right: 10px;
  bottom: 10px;
}

.details-content{
  width: 100%; /* 使表单宽度根据父容器调整 */
  padding: 30px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  height: 100%;

}
.item{
  margin-bottom: 5px;
  align-items: center;
  text-align: center;
}
.grid {
  display: flex;
  flex-wrap: wrap; /* 允许内容换行显示 */
  align-items: flex-start; /* 使单元格在容器内顶部对齐 */
  width: 100%; /* 根据父容器调整宽度 */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow-y: auto; /* 允许垂直滚动 */
  height: 100%; /* 减去padding的高度，保持内容完整可见 */
}

.room {
  width: 100px; /* 设置固定宽度 */
  height: 100px; /* 设置固定高度 */
  margin: 5px; /* 添加适量边距以避免过于拥挤 */
  display: flex;
  border-radius: 8px;
  justify-content: center; /* 内部内容水平居中 */
  align-items: center; /* 内部内容垂直居中 */
  text-align: center;
}

.room.未开启 {
  background-color: lightgray;
}

.room.运行中 {
  background-color: lightsalmon;
}

.room.等待中 {
  background-color: lightblue;
}


.submit-button {
  padding: 20px 40px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  position:absolute;
  right:40px;
  bottom:30px;
}

.submit-button:hover {
  background-color: #0056b3;
}
</style>
